<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{{asset('layui-v2.6.8/layui/css/layui.css')}}">
    <script src="{{asset('js/jquery.min.js')}}"></script>
    <script src="{{asset('layui-v2.6.8/layui/layui.js')}}"></script>
    <link rel="stylesheet" href="{{asset('css/im_chat.css')}}">
    <title>聊天页面</title>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>聊天页面</legend>
</fieldset>

<main>
    <section class="message_box">
        {{--
        <div class="left">
            <img class="header_img" src="{{asset('images/linux.png')}}" alt="">
            <div class="content_left">
                <p>对方方对方对方方对方对方方对方对方方对方对方方对方</p>
            </div>
        </div>
        <div class="right">
            <div class="content_right">
                <p>我方我方我方我方我方我方</p>
            </div>
            <img class="header_img" src="{{asset('images/php.png')}}" alt="">
        </div>
        --}}

    </section>


</main>

<section class="import_box">
    <div id="string">
        <textarea name="" id="string_msg_val" cols="30" rows="5" required placeholder="请输入聊天内容"></textarea>
        <button type="button" onclick="sendStringMsg()">发送</button>
    </div>
</section>
</body>
<script>

    ws = new WebSocket('ws://laravel-im.kjhhello.cn:9527');
    //检测websocket是否链接
    ws.onopen = function () {
        console.log("连接成功");
    };

    // 关闭 websocket
    ws.onclose = function () {
        console.log("连接已关闭...");
    };

    // 服务端主动推送消息时会触发这里的onmessage
    ws.onmessage = function(e){
        // json数据转换成js对象
        var data = eval("("+e.data+")");
        var type = data.type || '';
        console.log(type);
        switch(type){
            // Events.php中返回的init类型的消息，将client_id发给后台进行uid绑定
            case 'init'://监听初始化
                console.log(data);
                // 利用jquery发起ajax请求，将client_id发给后端进行uid绑定
                binding(data.client_id);
                break;
            case 'binding_success'://监听绑定成功信息
                console.log(data);
                break;
            case 'string'://监听收到的文字信息
                console.log(data);
                if(data.addresser_id != "{{$friend_id}}"){
                    return false;
                }
                //将文字信息渲染到视图上
                let _html = "<div class=\"left\">\n" +
                "            <img class=\"header_img\" src=\"{{asset('images/linux.png')}}\" alt=\"\">\n" +
                "            <div class=\"content_left\">\n" +
                "                <p>"+ data.msg +"</p>\n" +
                "            </div>\n" +
                "        </div>";
                $('.message_box').append(_html);//将新的文字信息追加到模板上
                break;
            case 'img'://监听收到的图片信息
                console.log(data);
                if(data.addresser_id != "{{$friend_id}}"){
                    return false;
                }
                let _img_html = "<div class=\"left\">\n" +
                    "            <img class=\"header_img\" src=\"{{asset('images/linux.png')}}\" alt=\"\">\n" +
                    "            <div class=\"content_left\">\n" +
                    "                <img src=" + data.msg + ">\n" +
                    "            </div>\n" +
                    "        </div>";
                $('.message_box').append(_img_html);//将新的文字信息追加到模板上
                break;
            default :
                alert(e.data);
        }
    };

    //切换输入框
    function transitionToggle(){
        $('#string').toggle();
        $('#file_box').toggle();
    }

    //绑定uid
    function binding(client_id){
        //绑定业务逻辑
        $.ajax({
            type : "POST", //提交方式
            url : "{{route('im.binding')}}",//路径
            data : {
                '_token':'{{csrf_token()}}'//laravel 防止ajax POST请求报419错误方法
                ,'user_id' : "{{session('user')['id']}}"
                ,'client_id' :client_id
            },//数据，这里使用的是Json格式进行传输
            success : function(result) {//返回数据根据结果进行相应的处理
                var data = JSON.parse(result);//接受到服务器给我返回的JSON数据并进行解析
                if (data.success) {
                    console.log('绑定结果:' + data.msg);
                } else {
                    alert('绑定失败');
                }
            }
        });

    }

    //发送文字消息
    function sendStringMsg() {
        let msg = $('#string_msg_val').val();
        if(!msg){
            layer.msg('请输入内容', {time: 5000, icon: 2});
            return false;
        }
        $.ajax({
            type : "POST", //提交方式
            url : "{{route('im.sendMessage')}}",//路径
            data : {
                '_token':'{{csrf_token()}}'//laravel 防止ajax POST请求报419错误方法
                ,'recipients_id' :"{{$friend_id}}"//好友id
                ,'type':'string'
                ,'msg':msg
            },//数据，这里使用的是Json格式进行传输
            success : function(result) {//返回数据根据结果进行相应的处理
                var data = JSON.parse(result);//接受到服务器给我返回的JSON数据并进行解析
                if (data.success) {
                    console.log('文字发送结果:' + data.msg);
                    //将发送的信息显示到html中
                    let _string = " <div class=\"right\">\n" +
                        "            <div class=\"content_right\">\n" +
                        "                <p>"+ data.msg +"</p>\n" +
                        "            </div>\n" +
                        "            <img class=\"header_img\" src=\"{{asset('images/php.png')}}\" alt=\"\">\n" +
                        "        </div>";
                    $('.message_box').append(_string);//将新的文字信息追加到模板上
                    $('#string_msg_val').val('');//清理输入框
                } else {
                    layer.msg('发送失败', {time: 5000, icon: 2});
                }
            }
        });
    }

    //发送图片文件
    function sendImgMsg(){
        let msg = $('#base64_value').val();//获取base64发送给php接口
        $.ajax({
            type : "POST", //提交方式
            url : "{{route('im.sendMessage')}}",//路径
            data : {
                '_token':'{{csrf_token()}}'//laravel 防止ajax POST请求报419错误方法
                ,'recipients_id' :"{{$friend_id}}"//好友id
                ,'type':'img'
                ,'msg':msg
            },//数据，这里使用的是Json格式进行传输
            success : function(result) {//返回数据根据结果进行相应的处理
                var data = JSON.parse(result);//接受到服务器给我返回的JSON数据并进行解析
                if (data.success) {
                    console.log('文字发送结果:' + data.msg);
                    //将发送的信息显示到html中
                    let _string = "<div class=\"right\">\n" +
                        "            <div class=\"content_right\">\n" +
                        "                <img src="+data.msg+" alt=\"\">\n" +
                        "            </div>\n" +
                        "            <img class=\"header_img\" src=\"{{asset('images/php.png')}}\" alt=\"\">\n" +
                        "        </div>";
                    $('.message_box').append(_string);//将新的文字信息追加到模板上
                    $('#string_msg_val').val('');//清理输入框
                } else {
                    layer.msg('发送失败', {time: 5000, icon: 2});
                }
            }
        });
    }

    /**
     * 获取文件base64
     */
    function filechange(_id_name) {
        var selectFile = document.getElementById(_id_name);
        var filePath = selectFile.value;//文件路径
        var fileName = selectFile.files[0].name;//上传的文件名称
        var file = selectFile.files[0];//上传的文件
        var extn = fileName.substring(fileName.lastIndexOf('.') + 1).toLowerCase();//文件后缀
        //文件base64string获取
        if (window.FileReader) {
            var reader = new FileReader();
            reader.readAsDataURL(file);
            //监听文件读取结束后事件
            reader.onloadend = function (e) {
                var base64String=e.target.result;
                $('#base64_value').val(base64String);
            };
        }
    }
</script>

</html>
